<div class="touchslider">
    <div class="touchslider-viewport" style=" width:350px; height:180px; overflow:hidden">
    <div>
    	<?php foreach ($this->imgs as $image) {
	?>
			 <div class="touchslider-item">
				<img src="<?php echo $this->baseUrl()."/".$image['image']?>" alt="picture" width="350" height="180" >
			</div>
	<?php }?>
    </div>
    </div>
    <div style = "margin-top: -185px; position: absolute; margin-left: 500px;">
        <span class="touchslider-prev prev"></span>
        
        <span class="touchslider-next next"></span>
    </div>
</div>
<script>
jQuery(function($) {
    $(".touchslider").touchSlider({
        container: this,
    	duration: 350, // the speed of the sliding animation in milliseconds
    	delay: 3000, // initial auto-scrolling delay for each loop
    	margin: 5, // borders size. The margin is set in pixels.
    	mouseTouch: true,
    	namespace: "touchslider",
    	next: ".touchslider-next", // jQuery object for the elements to which a "scroll forwards" action should be bound.
    	prev: ".touchslider-prev", // jQuery object for the elements to which a "scroll backwards" action should be bound.
    	autoplay: true, // whether to move from image to image automatically
    	viewport: ".touchslider-viewport"
        	});
    var height = $(".touchslider-item:first img").height();
	$(".touchslider-viewport").css("height",height);
	$(".touchslider-viewport").children().css("height",height);
});
</script>